<!--
 * @Author: liujinjun681 liujinjun681@qq.com
 * @Date: 2022-07-19 14:20:31
 * @LastEditors: liujinjun681 liujinjun681@qq.com
 * @LastEditTime: 2022-12-03 16:31:14
 * @FilePath: \hd_ims_web\src\views\board\boardSelect\board_mould_status copy.vue
 * @Description: 机台水流量历史曲线查询展示
-->
<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label="时间：">
            <el-date-picker
              v-model="queryParams.rzmRq"
              type="date"
              placeholder="查询日期"
              style="width: 320px"
              format="yyyy-MM-dd"
              autocomplete="off"
              @change="getData"></el-date-picker>
          </el-form-item>
          <el-form-item label="机台：">
            <el-select filterable clearable v-model="queryParams.rzmJtbh" @change="getData">
              <el-option v-for="item in listJtmJtbh" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物料：" prop="moeWldm">
            <HdSelectMaterial v-model="queryParams.moeWldm" placeholder="物料选择" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row v-loading="loading" element-loading-text="数据量较大，请稍候">
      <el-col :span="24">
        <v-chart :options="chartOpt" class="" :autoresize="true" style="width: 100%; height: 650px"></v-chart>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PythonService from '@/api/python/python'

import { listRzm, getRzm, delRzm, addRzm, updateRzm, exportRzm } from '@/api/production/rzm'
import mixins from '@/mixins/common'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/dataZoom'

export default {
  name: 'HistoryCxsj',
  mixins: [mixins.listJtmJtbh],
  data() {
    return {
      loading: false,
      jtbh: '',
      rzmList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 9999,
        rzmRq: this.$moment().add(-1, 'days').format('YYYY-MM-DD'),
        rzmJtbh: null,
        rzmZldm: null,
        moeZzdh: null,
        moeSodh: null,
        moeWldm: null,
        params: {
          beginRzmRq: undefined,
          endRzmRq: undefined,
        },
      },
    }
  },
  computed: {
    chartOpt() {
      const markLine = {}
      if (this.rzmList[0] && this.rzmList[0].rzmCxsj) {
        markLine.markLine = {
          silent: true,
          data: [
            {
              name: '标准成型时间',
              yAxis: this.rzmList[0].rzmCxsj,
            },
          ],
          lineStyle: {
            type: 'dashed',
            width: 2,
          },
          label: {
            normal: {
              formatter: '标准成型时间: ' + this.rzmList[0].rzmCxsj,
            },
          },
        }
      }

      return {
        dataset: {
          source: this.rzmList,
        },
        title: {
          text: '成型周期',
          x: '5px',
        },
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%']
          },
          formatter: function (params, ticket, callback) {
            const data = params[0].value
            return `${data.rzmJlrq}<br>物料品名：${data.itmPmgg}<br>物料代码：${data.moeWldm}<br>模具编号：${data.moeMjbh}<br>标准周期：${data.rzmCxsj}<br>实际成型周期：${data.rzmSjcxsj}<br>`
          },
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 20,
          },
          {
            start: 0,
            end: 20,
          },
        ],
        legend: {
          show: true,
          x: 'right',
          itemWidth: 40,
          itemHight: 30,
          textStyle: {
            fontSize: 16,
          },
        },
        grid: {
          borderWidth: 0,
          top: 45,
          left: 100,
          bottom: 100,
          textStyle: {
            color: '#555',
          },
        },
        xAxis: [{ type: 'time', boundaryGap: false, splitNumber: 12 }],
        yAxis: [
          {
            type: 'value',
            boundaryGap: [0, '100%'],
          },
        ],
        series: [
          {
            name: '成型周期',
            type: 'line',
            itemStyle: { color: '#ed4014' },
            // lineStyle: { width: 1 },
            dimensions: [{ name: 'rzmJlrq', type: 'time' }, 'rzmSjcxsj'],
            connectNulls: false,
            // sampling: 'lttb',
            // smooth: true,
            symbol: 'none',
            ...markLine,
          },
        ],
      }
    },
  },
  methods: {
    getData() {
      if (!this.queryParams.rzmJtbh || this.loading) return
      this.queryParams.params.beginRzmRq = this.$moment(this.queryParams.rzmRq).startOf('day').format()
      this.queryParams.params.endRzmRq = this.$moment(this.queryParams.rzmRq).endOf('day').format()
      this.loading = true
      listRzm(this.queryParams)
        .then((response) => {
          this.rzmList = response.rows.filter((a) => a.rzmSjcxsj < 2 * a.rzmCxsj && a.rzmSjcxsj > (2 * a.rzmCxsj) / 3)
          this.total = response.total
          this.loading = false
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
  mounted() {
    this.getData()
  },
}
</script>
<style lang="scss" scoped></style>
